<template>
    <div class=login>
        <div class="back"></div>
        <div class="loginBox">
            <div class="login-left">
                <div class="loginLeftTop">
                    欢迎登录<br>
                    塞罕云 · <span class="text">突突到家运营系统</span>   
                </div>
                <div class="loginLeft-bottom">
                </div>
            </div>
            <div class="login-right">
                <div class="login-right-top">
                    <p>
                        <span class="color">Hello！</span>欢迎登录后台
                    </p>
                    <span>WELCOME TO THE SYSTEM</span>
                </div>
                <div class="input">
                    <div class="input-name">
                        <img src="../assets/img/zh@2x.png" alt="">
                        <input type="text" placeholder="请输入用户名/手机号" v-model="uname">
                    </div>
                    <div v-if="loginnum==2" class="input-name input-upwd">
                        <img src="../assets/img/mm@2x.png" alt="">
                        <input type="text" placeholder="请输入验证码" v-model="upwd">
                        <span v-if="!isNum" class="getupwd" @click="getupwd">获取验证码</span>
                        <span v-else class="getupwd" style="background:#ccc;">{{num}}</span>
                    </div>
                    <div v-else class="input-name input-upwd">
                        <img src="../assets/img/mm@2x.png" alt="">
                        <input type="password" placeholder="请输入密码" v-model="upwd">
                    </div>
                    <div class="iptTop ">
                        <div>
                            <span class="checkbox" @click="correctNum=!correctNum" :class="{active:correctNum}"><img src="../assets/img/index/login-correct.png" alt=""></span>
                            <span class="rember">记住我</span>
                        </div>
                        <div style="color:rgb(13 155 255);">
                            <span v-if="loginnum==1" @click="loginnum=2">手机号登录</span>
                            <span v-else @click="loginnum=1">密码登录</span>
                        </div>
                    </div>
                </div>
                <div class="btnLogin">
                    <button @click="login">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
           uname:'',
           upwd:'',
           correctNum:false,
           loginnum:1,
           num:60,
           isNum:false
        }
    },
    mounted(){
        document.onkeydown = event=>{
            var e = event || window.event;
            if (e && e.keyCode == 13) { //回车键的键值为13
                this.login()
            }
        }
        if(localStorage.getItem("uname")){
            this.uname=localStorage.getItem('uname')
            this.upwd=localStorage.getItem('upwd')
            this.correctNum=localStorage.getItem('correctNum')
        }
    },
    methods:{
        //获取验证码
        getupwd(){
            var param={
               "phone": this.uname
            }
            this.axios({
                url: "/admin/getCode",
                method: "post",
                data: JSON.stringify(param),
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                },
            }).then((res)=>{
                this.isNum=true
                var time=setInterval(()=>{
                    if(this.num>0){
                        this.num-=1
                    }else{
                        this.num=60
                        this.isNum=false
                        clearInterval(time);
                    }
                },1000)
            })
        },
        // 登录
        login(){
            var param={
                "code":"",
                "password": "",
                "rememberMe": this.correctNum,
                "username": this.uname
            }
            if(this.loginnum==2){param.code=this.upwd}else{param.password=this.upwd}
            console.log('点击登录',param)
            this.axios({
                url: "/admin/login",
                method: "post",
                data: JSON.stringify(param),
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                },
            }).then(res=>{
                console.log('登录',res.data)
                if (!res.data.code){
                    sessionStorage.setItem('uname',this.uname);
                    sessionStorage.setItem('correctNum',this.correctNum);
                    sessionStorage.setItem('islogin',true);
                    sessionStorage.setItem('token',res.data.data.token);
                    if(this.correctNum){
                        localStorage.setItem("uname", this.uname);
                        localStorage.setItem("upwd", this.upwd);
                    }else{
                        localStorage.setItem("uname", '');
                        localStorage.setItem("upwd", '');
                    }
                    var payload=res.data
                    payload.uname=this.uname
                    payload.upwd=this.upwd
                    payload.correctNum=this.correctNum
                    this.$store.commit('login_mutation',payload)  
                    this.$router.push('/index')
                }else{
                    alert(res.data.message);
                }
            })
        },
    }
}

</script>
<style lang="sass" scoped>

</style>
<style scoped>
.back {
  position: fixed;
  width: 850px;
  height: 533px;
  margin-top: 90px;
  background: url("../assets/img/back@2x.png") 50% no-repeat;
  background-size: 100%;
}
.login{
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    min-width: 1080px;
    min-height: 100vh;
    background: url(../assets/img/background2.png) 100% no-repeat;
}
.loginBox {
    z-index: 10;
    display: flex;
    width: 900px;
    height: 543px;
    background: #FAFAFA;
    border-radius: 10px;
}
.login-left{
    width: 494px;
    position: relative;
    padding-left: 14px;
}
.loginLeftTop {
    color: #333;
    font-size: 24px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
    margin-top: 35px;
    margin-left: 26px;
}
.loginLeftTop .text {
    color: #F78210;
}
.loginLeft-bottom {
    margin-top: 60px;
    height: 302px;
    width: 478px;
    background: url('../assets/img/home-content2New.png') 100% no-repeat;
    background-size: cover;
}
.loginLeft-bottom p:first-child{
    color:rgba(253, 191, 94, 1);
    margin-bottom: 2px;
}
.login-right{
    border-radius: 10px;
    width:408px;
    padding: 0 44px;
    /* padding: 90px; */
    /* padding-top: 150px; */
    box-sizing: border-box;
    background: #FFFFFF;
}
.login-right-top{
    color: #2996FF;
    font-family: MicrosoftYaHei;
    font-size: 30px;
    text-align: center;
}
.login-right-top p {
    font-weight: bold;
    margin-top: 62px;
    color: #333333;
}
.login-right-top p span{
    font-weight: bold;
    margin-top: 78px;
    color: #2996FF;
}
.login-right-top .color{
    font-size: 30px;
}
.login-right-top span{
    font-size: 16px;
    color: #CACACA;
}
.login-right .input{
    margin-top: 55px;
}
.login-right .input input{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 25px;
    background: #F8FAFB;
    font-size: 16px;
    padding: 0 0px 0 45px;
    outline: 0;
    height: 50px;
}
.input-name{
    margin-top: 20px;
    position: relative;
}
.input-name img{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    left: 12px;
}
.input-upwd{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.input-upwd .getupwd{
    width: 160px;
    margin-left: 10px;
    height:50px;
    border-radius: 25px;
    background: #2996FF;
    color: #fff;
    line-height: 50px;
    text-align: center;
}
.iptTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.rember{
    font-size: 15px;
    color: #444;
    margin: 0 0 0 10px;
}
.btnLogin{
    width: 100%;
    margin:40px auto 0;
}
.btnLogin button{
    background: #2996FF;
    height: 50px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    width: 100%;
    border: none;
    border-radius: 25px;
    outline: 0;
}
.btnLogin button::after{
    border: none;
}
.iptTop .checkbox{
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #ddd;
    position: relative;
}
.iptTop>div{
    display: flex;
    align-items: center;
}
.iptTop .checkbox img{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.iptTop .active{
    background:rgba(255, 218, 59, 1) ;
}
</style>